<template>
    <div style="height: 100%; width: 100%">
        <div v-loading="loading" id="loading"></div>
        <div id="box"></div>
    </div>
</template>

<script>
    import geo from '@/assets/jsons/geo.json'
    import city from '@/assets/jsons/citys.json'
    import echarts from 'echarts'
    import bmap from 'echarts/extension/bmap/bmap'
    export default {
        components: {
        },
        data() {
            return {
                lang: '',
                data: [],
                city: [],
                geo: {},
                loading: true
            }
        },
        methods: {
            convertData() {
                const res = [], len = this.data.length
                const citys = {}
                for (let j = 0; j < len; j++) {
                    if (citys[this.data[j].city]) {
                        citys[this.data[j].city].push(this.data[j])
                    } else {
                        citys[this.data[j].city] = []
                        citys[this.data[j].city].push(this.data[j])
                    }
                }
// console.log(Object.keys(citys).length)
                for (const city in citys) {
                    const geoCoord = this.geo[city];
                    // console.log(city, citys[city].length)
                    // console.log(citys[city].length)
                    if (geoCoord) {
                        res.push({
                            name: city,
                            value: geoCoord.concat(citys[city].length)
                        });
                    }
                }
                console.log(res)
                

                // for (let i = 0; i < citys.length; i++) {
                //     const geoCoord = this.geo[this.data[i].city];
                //     if (geoCoord) {
                //         res.push({
                //             name: this.data[i].city,
                //             value: geoCoord.concat(this.data[i].salary_min)
                //         });
                //     }
                // }

                return res;
            },
            renderItem(params, api) {
                const coords = [
                    // [116.7,39.53],
                    // [103.73,36.03],
                    // [112.91,27.87],
                    // [120.65,28.01],
                    // [119.57,39.95]
                ];
                const points = [];
                for (let i = 0; i < coords.length; i++) {
                    points.push(api.coord(coords[i]));
                }
                const color = api.visual('color');

                return {
                    type: 'polygon',
                    shape: {
                        points: echarts.graphic.clipPointsByRect(points, {
                            x: params.coordSys.x,
                            y: params.coordSys.y,
                            width: params.coordSys.width,
                            height: params.coordSys.height
                        })
                    },
                    style: api.style({
                        fill: color,
                        stroke: echarts.color.lift(color)
                    }),
                    name: 'xxx'
                };
            }
        },
        created () {
            this.lang = this.$route.params.lang
            this.geo = geo
            this.city = city
            this.data = require('@/assets/jsons/jobs_' + this.lang + '.json')
            this.option = {
                    backgroundColor: 'transparent',
                    title: {
                        text: this.lang,
                        subtext: ' 前程无忧3月份 ' + this.lang + ' 招聘数量',
                        sublink: 'https://www.51job.com',
                        left: 'center',
                        textStyle: {
                            color: '#fff'
                        }
                    },
                    tooltip : {
                        trigger: 'item'
                    },
                    bmap: {
                        center: [104.114129, 37.550339],
                        zoom: 5,
                        roam: true,
                        mapStyle: {
                            styleJson: [
                                    {
                                        "featureType": "water",
                                        "elementType": "all",
                                        "stylers": {
                                            "color": "#044161"
                                        }
                                    },
                                    {
                                        "featureType": "land",
                                        "elementType": "all",
                                        "stylers": {
                                            "color": "#004981"
                                        }
                                    },
                                    {
                                        "featureType": "boundary",
                                        "elementType": "geometry",
                                        "stylers": {
                                            "color": "#064f85"
                                        }
                                    },
                                    {
                                        "featureType": "railway",
                                        "elementType": "all",
                                        "stylers": {
                                            "visibility": "off"
                                        }
                                    },
                                    {
                                        "featureType": "highway",
                                        "elementType": "geometry",
                                        "stylers": {
                                            "color": "#004981"
                                        }
                                    },
                                    {
                                        "featureType": "highway",
                                        "elementType": "geometry.fill",
                                        "stylers": {
                                            "color": "#005b96",
                                            "lightness": 1
                                        }
                                    },
                                    {
                                        "featureType": "highway",
                                        "elementType": "labels",
                                        "stylers": {
                                            "visibility": "off"
                                        }
                                    },
                                    {
                                        "featureType": "arterial",
                                        "elementType": "geometry",
                                        "stylers": {
                                            "color": "#004981"
                                        }
                                    },
                                    {
                                        "featureType": "arterial",
                                        "elementType": "geometry.fill",
                                        "stylers": {
                                            "color": "#00508b"
                                        }
                                    },
                                    {
                                        "featureType": "poi",
                                        "elementType": "all",
                                        "stylers": {
                                            "visibility": "off"
                                        }
                                    },
                                    {
                                        "featureType": "green",
                                        "elementType": "all",
                                        "stylers": {
                                            "color": "#056197",
                                            "visibility": "off"
                                        }
                                    },
                                    {
                                        "featureType": "subway",
                                        "elementType": "all",
                                        "stylers": {
                                            "visibility": "off"
                                        }
                                    },
                                    {
                                        "featureType": "manmade",
                                        "elementType": "all",
                                        "stylers": {
                                            "visibility": "off"
                                        }
                                    },
                                    {
                                        "featureType": "local",
                                        "elementType": "all",
                                        "stylers": {
                                            "visibility": "off"
                                        }
                                    },
                                    {
                                        "featureType": "arterial",
                                        "elementType": "labels",
                                        "stylers": {
                                            "visibility": "off"
                                        }
                                    },
                                    {
                                        "featureType": "boundary",
                                        "elementType": "geometry.fill",
                                        "stylers": {
                                            "color": "#029fd4"
                                        }
                                    },
                                    {
                                        "featureType": "building",
                                        "elementType": "all",
                                        "stylers": {
                                            "color": "#1a5787"
                                        }
                                    },
                                    {
                                        "featureType": "label",
                                        "elementType": "all",
                                        "stylers": {
                                            "visibility": "off"
                                        }
                                    }
                            ]
                        }
                    },
                    series : [
                        {
                            name: '招聘数量',
                            type: 'scatter',
                            coordinateSystem: 'bmap',
                            data: this.convertData(this.data),
                            symbolSize: function (val) {
                                console.log(val)
                                return val[2] / 50;
                            },
                            label: {
                                formatter: '{b}',
                                position: 'right'
                            },
                            itemStyle: {
                                color: '#ddb926',
                                formatter: '{a}',
                            },
                            emphasis: {
                                label: {
                                    show: true
                                }
                            }
                        },
                        {
                            name: 'Top 5',
                            type: 'effectScatter',
                            coordinateSystem: 'bmap',
                            data: this.convertData(this.data.sort(function (a, b) {
                                return b.salary_min - a.salary_min;
                            }).slice(0, 6)),
                            symbolSize: function (val) {
                                return val[2] / 50;
                            },
                            showEffectOn: 'emphasis',
                            rippleEffect: {
                                brushType: 'stroke'
                            },
                            hoverAnimation: true,
                            label: {
                                formatter: '{b}',
                                position: 'right',
                                show: true
                            },
                            itemStyle: {
                                color: '#f4e925',
                                shadowBlur: 10,
                                shadowColor: '#333'
                            },
                            zlevel: 1
                        },
                        {
                            type: 'custom',
                            coordinateSystem: 'bmap',
                            renderItem: this.renderItem,
                            itemStyle: {
                                opacity: 0.5
                            },
                            animation: false,
                            silent: true,
                            data: [0],
                            z: -10
                        }
                    ]
                }
        },
        mounted () {
            const echat = echarts.init(document.getElementById("box"))
            echat.setOption(this.option)
            this.loading = false
        },
    }
</script>

<style>
#box, #loading {
    width: 100%;
    height: 100%;
    position: absolute;
    left: 0;
    top: 0;
    z-index: 2;
}
#loading {
    z-index: 0;
}
</style>